import React, { useState } from 'react';
import { Switch, Table,Input,Select,Space,DatePicker,Button  } from 'antd';
import type { TableColumnsType } from 'antd';
import type { DatePickerProps } from 'antd';
import type { Dayjs } from 'dayjs';
import {
  PlusOutlined,
  DownloadOutlined,
  UploadOutlined,
  DeleteOutlined,
  ClockCircleOutlined,
  DownOutlined,
  SearchOutlined,
  FilterOutlined,
  BorderOutlined,
  MenuUnfoldOutlined,
  SyncOutlined,
  FullscreenOutlined
} from '@ant-design/icons';
interface DataType {
  /** 计划送货日期 */
  number:string;
  plannedDeliveryDate: Date | string;
  /** 计划送货内容备注（可选） */
  deliveryContentNote?: string;
}



const App: React.FC = () => {
  const onChange: DatePickerProps<Dayjs[]>['onChange'] = (date, dateString) => {
  console.log(date, dateString);
};
const columns: TableColumnsType<DataType> = [
  {
    title: '',
    
    dataIndex: '',
    key: 0,

  },
  {
    title: '送货批次',
   
    dataIndex: 'number',
    key: 1,
    fixed: 'left',
    render:(()=>{
        return <Select
    showSearch
    placeholder="Select a person"
    filterOption={(input, option) =>
      (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
    }
    options={[
      { value: '1', label: '整批' },
      { value: '2', label: '第一批' },
      { value: '3', label: '第二批' },
      { value: '4', label: '第三批' },
    ]}
  />
    })
  },
  {
    title: '计划送货日期',
   
    key: 2,
    dataIndex: 'plannedDeliveryDate',
     render:(()=>{
        return <DatePicker onChange={onChange} needConfirm />
    })
  },
  {
    title: '计划送货内容备注',
   
    dataIndex: 'deliveryContentNote',

    key: 3,
    render:(()=>{
        return <Input />
    })
  }
  
];

const [dataSource,setdataSource ]= useState([
  {
        number:"",
        plannedDeliveryDate: "",
        /** 计划送货内容备注（可选） */
        deliveryContentNote: ""
  },
 
 
]);
  return (
    <div>
      <Table<DataType>
         style={{maxWidth:"100%"}}
      columns={columns}
      dataSource={dataSource}
      
    />


         <div style={{ marginTop: 16 }}>
                <Button icon={<PlusOutlined />} className='yanse2'  onClick={()=>{
                      let obj={
                        number:"",
                          plannedDeliveryDate: "",
                          /** 计划送货内容备注（可选） */
                          deliveryContentNote: ""
                      }
                      setdataSource((aa)=>[...aa,obj])
                    }}>添加</Button>
                <Button icon={<ClockCircleOutlined />} className='yanse2' style={{ marginLeft: 8 }}>快速填报</Button>
              </div>

    </div>

  );
};

export default App;